import React, { useEffect, useState } from 'react'
import { useSearchParams } from 'react-router-dom'
import { Mask, Toast } from 'antd-mobile'
import { OpenBox } from '../../api/coin'
import NavBar from '../../components/Navbar'
import './index.less'

function CoinItem() {
  const params = useSearchParams()[0]
  const [pointItem, setPointItem] = useState({ point: 0, img: '', details: '', name: '' })
  const [gifts, setGifts] = useState([])
  const [visible, setVisible] = useState(false)
  const [clickable, setClickable] = useState(true)

  const onHandleClick = () => {
    if (clickable) {
      setClickable(false)
      OpenBox({ box_id: params.get('id') })
        .then((res) => {
          console.log(res)
          setGifts(res.data)
          setVisible(true)
          // Toast.show({
          //   icon: 'success',
          //   content: '兑换成功',
          //   maskClickable: false,
          // })
        })
        .catch((reason) => {
          Toast.show({
            icon: 'fail',
            content: reason.message || '服务器异常',
            maskClickable: false
          })
        })
        .finally(() => {
          setClickable(true)
        })
    }
  }

  const [packageData, setPackageData] = useState([])

  useEffect(() => {
    console.log('id', params.get('id'), localStorage.getItem('POINT_ITEM'))
    // if (params.get('id')) {
    //   getDetail()
    // }
    if (localStorage.getItem('POINT_ITEM')) {
      const data = JSON.parse(localStorage.getItem('POINT_ITEM'))
      setPointItem(data)
      setPackageData(data.box_show_data)
    }
  }, [params])

  return (
    <div className="CoinItem_detail">
      <NavBar title="优选大礼包" />
      <div className="detail_info">
        <div className="con_tit">礼包内容展示</div>
        {/* <img className='detail_img' src={pointItem?.img} alt='' /> */}
        <div className="package_data">
          <div className="gift_contents">
            {packageData.map((item) => (
              <div className="gift_item" key={item.show_img}>
                {item.is_bz || item.is_zj ? (
                  <div className="attr">
                    <span>
                      {item.is_zj ? '盲盒最佳' : ''}
                      {item.is_bz ? '必得奖励' : ''}
                    </span>
                  </div>
                ) : null}
                <div className="img">
                  <img src={item.show_img} alt="" />
                </div>
                <div className="name ellipsis1">
                  <span className="ellipsis1">{item.name}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className="detail_content_text">
          <div className="detail_f">
            <div className="price">
              <div className="now">{pointItem?.point}积分</div>
            </div>
            <div className="tit">{pointItem?.name}</div>
          </div>
          {/* <div className="detail_s">
            <div className='level ellipsis2'>{pointItem?.details}</div>
          </div> */}
        </div>
        <div className="package_data_rule">
          <p className="tit">物品说明</p>
          <img src={pointItem?.rule_img} alt="" />
          <p className="tips">本活动最终解释权归{window.baseConfig.package_name}所有</p>
        </div>
      </div>
      <div className="detail_btn" onClick={onHandleClick}>
        立刻兑换
      </div>
      <Mask visible={visible} onMaskClick={() => setVisible(false)} opacity={0.9}>
        <div className="package_content">
          <div className="content animate__bounceInDown animate__animated">
            <div className="tit">恭喜你获得</div>
            <div className="list">
              {gifts.map((item) => (
                <div className="gift_item" key={item?.id}>
                  <div className="icon">
                    <img src={item?.img} alt="" />
                  </div>
                  <p className="name">{item?.name}</p>
                  <p className="expire">{item?.expire ? `${item?.expire}天` : '永久'}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Mask>
    </div>
  )
}

export default CoinItem
